<template>
    <view class="page" :style="{ '--color': color }" v-if="myInfo">
        <status-bar title="团队管理"></status-bar>
        <view class="Info">
            <view class="userBox">
                <image :src="$imgUrls(myInfo.headimg)" mode="aspectFill" class="userImg"></image>
                <view class="Lvs">{{ myInfo.upLevelInfo.thisLevelTitle }}</view>
            </view>
            <view class="flex-1 white">
                <view class="size30">{{ myInfo.name }}</view>
                <view class="size30 m-top10">{{ myInfo.tel }}</view>
            </view>
        </view>

        <view class="LvBox">
            <text class="size30 color_33">团队等级</text>
            <view class="LvWrapper">
                <text class="size28">{{ myInfo.upLevelInfo.thisLevelTitle }}</text>
                <view class="content">
                    <text class="Txt">{{ myInfo.upLevelInfo.text }}</text>
                    <view class="line">
                        <u-line-progress :percentage="myInfo.upLevelInfo.proportion" height="9" activeColor="#ffcc00"></u-line-progress>
                    </view>
                </view>
                <text class="size32 color_33">{{ myInfo.upLevelInfo.nextLevelTitle }}</text>
            </view>
        </view>

        <view class="Income">
            <view class="flex-1" @click="toUrl('/moneyPage/capital/brokerage_list')">
                <view class="d-flex a-center">
                    <text class="color_33 size28">我的收益（元）</text>
                    <text class="iconfont icon-a-zujian32 h7 color"></text>
                </view>
                <view class="color_33 size50">{{ myInfo.income }}</view>
            </view>
            <view class="d-flex a-center a-self-start p-top8" @click="toUrl('/moneyPage/capital/withdraws')">
                <text class="color size26">去提现</text>
                <text class="iconfont icon-a-zujian32 h7 color p-left4"></text>
            </view>
        </view>

        <view class="BoxItem">
            <!-- @click="toUrl('/Releases/groupPer')" -->
            <view class="list" @click="toUrl('/Releases/promotionOrder')">
                <view class="title">团队业绩（元）</view>
                <view class="Num">{{ myInfo.teamInfo.teamOrderMoney }}</view>
            </view>
            <view class="list" @click="toUrl('/Releases/groupMem')">
                <view class="title">团队成员（位）</view>
                <view class="Num">{{ myInfo.teamInfo.teamUserNum }}</view>
            </view>
        </view>

        <view class="BoxItem m-top20" v-if="myInfo.inviteInfo && myInfo.inviteInfo.orderId > 0">
            <view class="list" @click="toUrl(`formList?orderId=${myInfo.inviteInfo.orderId}`)">
                <view class="title">{{ myInfo.inviteInfo.title }}</view>
                <view class="black size28">待审核 {{ myInfo.inviteInfo.waitNum }}</view>
            </view>
            <image :src="$imgUrls(myInfo.inviteInfo.orderImg)" mode="widthFix" class="orderImg" @click="toUrl(myInfo.inviteInfo.orderPath)"></image>
        </view>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    import Api from '@/common/Api.js';
    export default {
        data() {
            return {
                myInfo: ''
            };
        },
        computed: {
            ...mapState(['color'])
        },
        onLoad() {
            this.getConfig();
        },
        methods: {
            async getConfig() {
                const result = await Api.getConfig();
                this.myInfo = result;
            }
        }
    };
</script>

<style lang="scss" scoped>
    .page {
        background-color: #f2f2f2;
    }

    .Info {
        background-color: var(--color);
        padding: 40rpx 24rpx;
        display: flex;
        align-items: center;

        .userBox {
            width: 150rpx;
            height: 120rpx;
            display: flex;
            justify-content: center;
            position: relative;

            .userImg {
                width: 100rpx;
                height: 100rpx;
                border-radius: 50%;
            }

            .Lvs {
                max-width: 100%;
                background-color: #ff9900;
                color: #fff;
                font-size: 22rpx;
                padding: 2rpx 10rpx;
                border-radius: 4rpx;
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                white-space: nowrap;
            }
        }
    }

    .LvBox {
        width: 690rpx;
        padding: 20rpx;
        background-color: #fff;
        margin: 24rpx auto 0;
        border-radius: 10rpx;

        .LvWrapper {
            display: flex;
            align-items: center;
            margin-top: 20rpx;

            .content {
                flex: 1;
                margin: 0 20rpx;
                display: flex;
                flex-direction: column;
                align-items: center;

                .Txt {
                    color: #b7655a;
                    font-size: 26rpx;
                }

                .line {
                    width: 100%;
                    margin-top: 10rpx;
                }
            }
        }
    }

    .Income {
        width: 690rpx;
        background-color: #fff;
        padding: 30rpx 24rpx;
        border-radius: 10rpx;
        margin: 24rpx auto 0;
        display: flex;

        // justify-content: space-between;
        // align-items: center;
    }

    .BoxItem {
        width: 690rpx;
        margin: auto;
        display: flex;
        flex-direction: column;

        .list {
            width: 100%;
            background-color: #fff;
            border-radius: 10rpx;
            padding: 30rpx;
            margin-top: 24rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .title {
                color: #333;
                font-size: 28rpx;
            }

            .Num {
                color: #333;
                font-size: 50rpx;
            }

            .count {
                display: inline-block;
                width: 50%;
                margin-top: 10rpx;
                font-size: 28rpx;
            }

            .toTitle {
                text-align: center;
                line-height: 200rpx;
                font-size: 36rpx;
            }
        }

        .orderImg {
            width: 100%;
            border-radius: 0 0 10rpx 10rpx;
        }
    }
</style>
